<template>
  <div class="user-info">
    <slot name="userImg">
      <img src="../../../static/img/skin_like_bg.png" alt="">
    </slot>
    <article>
      <p>{{name}}</p>
      <p>敏锐 | 机智 | 耐心 | 开朗</p>
    </article>
  </div>
</template>

<script>
    export default {
        name: "user-info",
      props: {
          name: {
            type: String,
            default: '1'
          }
      }
    }
</script>

<style scoped>
  .user-info{
    background: rgba(95, 139, 247,1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;/*rem*/
  }
  .user-info img{
    height: 164px;/*rem*/
    width: 164px;/*rem*/
    border-radius: 59%;
    border: 4px solid #fff;/*rem*/
  }
  .user-info article{
    margin-left: 12px;/*rem*/
    color: #fff;
  }
  .user-info article p:nth-child(1){
    margin-top: 12px;/*rem*/
    font-size: 24px;/*px*/
  }
  .user-info article p:nth-child(2){
    margin-top: 2px;/*rem*/
    font-size: 10px;/*px*/
  }
</style>
